import "./index.less";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import ListCard from "./components/listCard";
import { PageHeaderNew } from "@/components";
import { getActivityList } from "./service";

export default function Activities() {
  const navigate = useNavigate();
  const [listData, setListData] = useState<any>();
  const [pageTitle, setPageTitle] = useState<string>();
  const [pageType, setPageType] = useState<string>();

  const detailClick = (data: any) => {
    navigate(`/activityDetails?type=${pageType}&id=${data?.id}`);
  };
  const applicationClick = (data: any) => {
    navigate(`/activityApplication?type=${pageType}&id=${data?.id}`);
  };
  const getList = async () => {
    try {
      const res = await getActivityList({
        sendType: pageTitle,
        messageType: "1",
      });
      if (res?.success && res?.code === 200) {
        setListData(res?.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (pageTitle) getList()
  }, [pageTitle]);
  useEffect(() => {
    const type = location.search?.split("=")[1];
    setPageType(type);
    switch (type) {
      case "activities":
        setPageTitle("社区活动");
        break;
      case "guidance":
        setPageTitle("就业引导");
        break;
      case "support":
        setPageTitle("创业扶持");
        break;
      default:
        break;
    }
  }, [location.search]);

  return (
    <div className="c_activities_contarnier">
      <div className="header-bg"></div>
      <PageHeaderNew title={pageTitle} goBack={() => navigate("/")} />
      <div className="c_activities_content">
        {/* 海报 */}
        <div className="c_ac_imgBox">
          {pageTitle==="社区活动"? <img src="/images/sqhd.png" alt="" />:null}
          {pageTitle==="就业引导"? <img src="/images/jyyd.png" alt="" />:null}
          {pageTitle==="创业扶持"? <img src="/images/cyfc.png" alt="" />:null}
         
        </div>

        {/* 活动列表 */}
        <div className="c_ac_list">
          {listData?.length > 0 &&
            listData?.map((item: any, index: number) => {
              return (
                <ListCard
                  key={`c_ac_list_${index}`}
                  data={item}
                  type={pageTitle}
                  detailClick={detailClick}
                  applicationClick={detailClick}
                />
              );
            })}
        </div>
      </div>
    </div>
  );
}
